<template>
  <div class="user-info">
    <div class="title">基本信息</div>
    <van-cell-group>
      <van-cell title="头像">
        <img :src="userInfo.userIcon" v-if="userInfo && userInfo.userIcon" class="van-cell__right-icon">
        <img src="//pinduoduoimg.yangkeduo.com/avatar/default/10.png@128w_1l_70Q_50sh.webp" class="van-cell__right-icon">
      </van-cell>
      <van-cell title="昵称" :value="userName" />
      <van-cell title="性别" value="未知" />
      <van-cell title="常住地" value="未填写" />
      <van-cell title="生日" value="未填写" />
      <van-cell title="个性签名" value="未填写" />
    </van-cell-group>
  </div>
</template>

<script>
export default {
  computed: {
    userInfo() {
      return this.$store.state.auth.user;
    },
    userName() {
      if (this.userInfo.userName === this.userInfo.userPhone) {
        let str = this.userInfo.userName;
        let str2 = str.substr(0, 3) + "****" + str.substr(7);
        return str2;
      } else {
        return this.userInfo.userName;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.user-info {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f1f2f6;
  .title {
    display: flex;
    align-items: center;
    width: 100%;
    height: 0.48rem;
    padding-left: 0.12rem;
    text-align: left;
    font-size: 0.16rem;
    color: #58595b;
  }
  .van-cell__right-icon {
    width: 0.49rem;
    height: 0.49rem;
    border-radius: 50%;
  }
}
</style>

<style lang="less">
.van-cell .van-cell__title {
  display: flex;
  align-items: center;
}
</style>

